<!--
  组件名称：历史数据详情
 -->
<template>
  <HistoryData :row="row" :src="src" :addition="addition" :tabs="tabs">
    <div class="history-card" slot-scope="scope" style="width:600px;background-color: #fff;border: 2px solid #60cbf8;border-radius:10px;">
      <!--background-image: url(/static/img/beijingtu.bd4277a.jpg);-->
      <span style="color: #000;">&nbsp;&nbsp;{{scope.title}}</span>
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane v-for="(tabKey,index) in addition.historyTabs" :key="index" :label="tabs[tabKey]['name']" :name="index+''">
          <component :is="tabs[tabKey]['component']" :row="row" :src="assembleParam(tabs[tabKey].src,scope.src)" :addition="tabs[tabKey].addition" :tabs="tabs" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </HistoryData>
</template>
<script>
import HistoryData from './HistoryData'
import DateDataLineChart from './DateDataLineChart'

export default {
  name: 'ChartHistoryData',
  data () {
    return {
      activeName: '0'
    }
  },
  components: {
    HistoryData,
    DateDataLineChart
  },
  mounted () {
  },
  watch: {
  },
  computed: {

  },
  methods: {
    assembleParam (src, param) {
      // 组装
      return this.$handleSrc(src, { row: this.row, ...param.param })
    }
  },
  props: [
    'row',
    'src',
    // 附加数据
    'addition',
    'tabs'
  ]
}
</script>
<style scoped>
.history-card >>>.el-tabs--border-card{
  border:none;
}
.history-card >>> .el-tabs__header {
  background-color: #213477;
}
.history-card >>> .is-top {
  color: #fff;
}
.history-card >>> .is-active{
  border-bottom: none!important;
}
.history-card >>> .el-tabs__item:hover {
  color: #247df7;
  background: #fff;
  border-bottom: none;
}
.history-card >>> .is-active {
  color: #000;
}
</style>
